<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>阿里百秀-发现生活，发现美!</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="./assets/vendors/nprogress/nprogress.css">
</head>

<body>
  <div class="wrapper">
    <div class="topnav">
      <ul id="headerNavTabBox">
      </ul>
    </div>
    <div class="header">
      <h1 class="logo"><a href="index.html"><img src="assets/img/logo.png" alt=""></a></h1>
      <ul class="nav" id="navTabBox">

      </ul>
      <div class="search">
        <form>
          <input type="text" class="keys" placeholder="输入关键字">
          <input type="submit" class="btn" value="搜索">
        </form>
      </div>
    </div>
    <div class="aside">
      <div class="widgets">
        <h4>搜索</h4>
        <div class="body search">
          <form>
            <input type="text" class="keys" placeholder="输入关键字">
            <input type="submit" class="btn" value="搜索">
          </form>
        </div>
      </div>
      <div class="widgets">
        <h4>随机推荐</h4>
        <ul class="body random" id="randomBox">

        </ul>
      </div>
      <div class="widgets">
        <h4>最新评论</h4>
        <ul class="body discuz" id="newCommentsBox">

        </ul>
      </div>
    </div>
    <div class="content">
      <div class="swipe">
        <ul class="swipe-wrapper" id="slidesBox">

        </ul>
        <p class="cursor"></p>
        <a href="javascript:;" class="arrow prev"><i class="fa fa-chevron-left"></i></a>
        <a href="javascript:;" class="arrow next"><i class="fa fa-chevron-right"></i></a>
      </div>
      <div class="panel hots">
        <h3>热门推荐</h3>
        <ul id="hotArticleBox">

        </ul>
      </div>
      <div class="panel new" id="newBox">

      </div>
    </div>
    <div class="footer">
      <p>© 2016 XIU主题演示 本站主题由 themebetter 提供</p>
    </div>
  </div>
  <script src="./assets/vendors/nprogress/nprogress.js"></script>
  <script src="assets/vendors/jquery/jquery.js"></script>
  <script src="assets/vendors/swipe/swipe.js"></script>
  <script src="./assets/vendors/art-template/template-web.js"></script>
  <script src="./assets/vendors/moment/moment.js"></script>
  <script src="./assets/js/index.js"></script>
  <!-- 轮播图模板 -->
  <script type="text/html" id="slidesTPL">
    {{each res v}}
    <li>
      <a href="{{v.link}}">
        <img src="{{v.image}}">
        <span>{{v.title}}</span>
      </a>
    </li>
    {{/each}}
  </script>
  <!-- 小圆点模板 -->
  <script type="text/html" id="yuandianTPL">
    {{each res v i}}
    <span class="{{i===0?'active' : ''}}"></span>
    {{/each}}
  </script>
  <!-- 热门推荐模板 -->
  <script type="text/html" id="hotTPL">
  {{each res v}}
  <li>
    <a href="/detail.html?id={{@v._id}}">
      <img src="{{v.thumbnail}}" alt="">
      <span>{{v.title}}</span>
    </a>
  </li>
  {{/each}}
</script>
  <!-- 最新发布模板 -->
  <script type="text/html" id="newTPL">
    <h3>最新发布</h3>
  {{each res v}}
  <div class="entry">
    <div class="head">
      <span class="sort">{{v.category.title}}</span>
      <a href="javascript:;">{{v.title}}</a>
    </div>
    <div class="main">
      <p class="info">{{v.author.nickName}} 发表于 {{moment(v.updateAt).format('YYYY-MM-DD')}}</p>
      <p class="brief">
        {{v.content}}
      </p>
      <p class="extra">
        <span class="reading">阅读({{v.meta.views}})</span>
        <span class="comment">评论({{v.meta.comments}})</span>
        <a href="javascript:;" class="like">
          <i class="fa fa-thumbs-up"></i>
          <span>赞({{v.meta.likes}})</span>
        </a>
        <a href="javascript:;" class="tags">
          分类：<span>{{v.category.title}}</span>
        </a>
      </p>
      <a href="javascript:;" class="thumb">
        <img src="{{v.thumbnail}}" alt="">
      </a>
    </div>
  </div>
  {{/each}}
</script>
  <!-- 随机推荐模板 -->
  <script type="text/html" id="randomTPL">
    {{each res v}}
    <li>
      <a href="javascript:;">
        <p class="title">{{v.title}}</p>
        <p class="reading">阅读({{v.meta.views}})</p>
        <div class="pic">
          <img src="{{v.thumbnail}}" alt="">
        </div>
      </a>
    </li>
    {{/each}}
</script>
  <!-- 最新评论模板 -->
  <script type="text/html" id="newCommentsTPL">
    {{each res v}}
    <li>
      <a href="javascript:;">
        <div class="avatar">
          <img src="{{v.author.avatar}}" alt="">
        </div>
        <div class="txt">
          <p>
            <span>{{v.author.nickName}}</span>{{moment(v.createAt).format('YYYY-MM-DD')}}说:
          </p>
          <p>{{v.content}}</p>
        </div>
      </a>
    </li>
    {{/each}}
</script>
  <!-- 渲染分类 -->
  <script type="text/html" id="categoryTPL">
   {{each res v}}
   <li><a href="/list.html?id={{@v._id}}"><i class="fa {{v.className}}"></i>{{v.title}}</a></li>
   {{/each}}
</script>



  <script>
    function runSlides() {
      //
      var swiper = Swipe(document.querySelector('.swipe'), {
        auto: 3000,
        transitionEnd: function (index) {
          // index++;
          $('.cursor span').eq(index).addClass('active').siblings('.active').removeClass('active');
        }
      });
      // 上/下一张
      $('.swipe .arrow').on('click', function () {
        var _this = $(this);

        if (_this.is('.prev')) {
          swiper.prev();
        } else if (_this.is('.next')) {
          swiper.next();
        }
      })
    }
  </script>

</body>

</html>